<template>
   <div class="container-list">
       <div class="list-item"  v-if="show">
           <div class="listbox" v-for="(listItem,index) in list" :key="index">
               <router-link :to="{ path: '/myTeacher' ,query:{num:index,userId:id}}">
                    <div class="imgbox">
                        <img :src="listItem.wechatPortrait" alt="">
                    </div>
                    <div class="text">
                        <p class="name">{{listItem.teachName}}</p>
                        <p class="abstract">{{listItem.teachRemark}}</p>
                    </div>
                    <div class="godetail">
                        查看详情
                    </div>
               </router-link>
           </div>
       </div>
       <div class="list-big" v-else>
          您暂时没有已分配老师，请等待系统分配，或前去报名。
          <div class="lose-more"></div>
       </div>
   </div>
</template>
<script>
export default {
  data(){
    return{
          list:"",
          id:"",
          show:true
    }
  },
  mounted(){
    this.getINformation()
    this.id=this.$route.query.userId
  },
  methods:{
      getINformation(){
           this.$axios.post('http://www.chenyekeji.com/bsti-rbac/wechat/getOrder?userId='+this.$route.query.userId)
          .then((res) => {
              console.log(res)
             
              if(res.data.data==""){
               this.show=false
              }else{
                    this.list=res.data.data
              }
          })
          
      },
  }
}
</script>
<style scoped>
.lose-more{
    height:200px ;
    margin-top:80px;
    background: url(../assets/lose-icon.png) no-repeat center center;
    background-size: contain;
}
.list-big{
    flex:1;
    font-size: 36px;
    color: #aaaaaa;
    padding:150px 50px 0 50px;
    background: #fff;
}
.listbox a{
 width: 100%;
 height: 100%;
 display: flex;

}
  .godetail{
      color:#aaaaaa;
      display: flex;
      align-items: center;
      padding-right: 40px;
      position: relative;
      font-size: 26px;
  }
  .godetail:after{
  content: '';
  position: absolute;
  top:0;
  right: 10px;
  height: 100%;
  width:20px;
  background: url(../assets/back.png) no-repeat center center;
  background-size:13px 23px ;
}
  .name{
      color: #333333;
      font-size: 28px; 
  } 
  .abstract{
      font-size: 26px;
      padding-right: 16px;
      display:-webkit-box; 
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2; 
      color: #bbbbbb;
      overflow: hidden;
  }
  .text{
      flex:1;
      padding-left:25px;
      text-align: left;
      display: flex;
      flex-flow: column;
      justify-content: center;
  }
  .container-list{
      height: 100%;
      width:100%;
      padding:20px 20px 0 20px ;
      background: #f4f4f4;
      position: relative;
      display: flex;
      box-sizing: border-box;
  }
  .list-item{
      background: #fff;
      flex:1;
      padding:0 30px;
      border-radius: 10px;
  }
  .listbox{
    height: 160px;
    text-align: left;
    border-bottom:1px solid #ededed;
    box-sizing: border-box;
    padding:30px 0 20px 0;
    font-size: 30px;
    display: flex;
  }
  .imgbox{
      padding-left:30px;
      display: flex;
      align-items: center;
  }
  .imgbox img{
   height: 105px;
   width: 105px;
   overflow: hidden;
   border-radius: 100%;
   border: 1px solid #fba7a7;
  }
</style>

